<template>
	<el-container>
		<el-header>成药处方</el-header>
		<el-main>
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="grid-content1 bg-purple">
						<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
							@selection-change="handleSelectionChange">
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column label="药品名称" width="160">
								<template slot-scope="scope">{{ scope.row.date }}</template>
							</el-table-column>
							<el-table-column prop="name" label="规格" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="unitprice" label="单价" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="useway" label="用法" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="usemuch" label="用量" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="usetime" label="频次" show-overflow-tooltip>
							</el-table-column>
						</el-table>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="grid-content bg-purple" align="center">
						<el-button>开立药方</el-button>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="grid-content bg-purple" align="center">
						<el-pagination background="#4FC1B0" layout="prev, pager, next" :total="1000">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</el-main>
		<el-footer>
			<el-row :gutter="20">
				<el-col :span="4">
					<div class="grid-content bg-purple1">
						<el-button>返回主菜单</el-button>
					</div>
				</el-col>
				<el-col :span="16">
					<div class="grid-content bg-purple1" align="center"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple1">
					</div>
				</el-col>
			</el-row>
		</el-footer>
	</el-container>
</template>
<script>
	export default {
		data() {
			return {
				tableData: [{
						date: '红芪',
						name: '10g/袋',
						unitprice: '30.79',
						useway: '内服',
						usemuch: '一袋',
						usetime: '3次/天'
					},
					{
						date: '山药颗粒',
						name: '0.5g/10g/袋',
						unitprice: '6.79',
						useway: '内服',
						usemuch: '一袋',
						usetime: '3次/天'
					},

					{
						date: '白芷颗粒',
						name: '1g/6g/袋',
						unitprice: '67.72',
						useway: '内服',
						usemuch: '一袋',
						usetime: '3次/天'
					},

					{
						date: '丹参颗粒',
						name: '2g/10g/袋',
						unitprice: '11.61',
						useway: '内服',
						usemuch: '一袋',
						usetime: '3次/天'
					},

					{
						date: '酚酞',
						name: '25g×1瓶',
						unitprice: '10.42',
						useway: '外用',
						usemuch: '1g',
						usetime: '3次/天'
					},

					{
						date: '白附子',
						name: '1000mg/g',
						unitprice: '31.83',
						useway: '内服',
						usemuch: '5g',
						usetime: '3次/天'
					}
				],
				multipleSelection: []
			}
		},

		methods: {
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
		}
	}
	
</script>
<style>
	.el-footer {
		background-color: #4FC1B0;
		color: #333;
		text-align: center;
		line-height: 60px;
		border-radius: 10px;
	}

	.el-header {
		text-align: left;
		font-size: 40px;
		color: #ffffff;
		border-radius: 10px;
		background-color: #4FC1B0;
	}

	.el-main {
		background-color: #ffffff;
		color: #333;
		text-align: center;
		height: 610px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}


	.bg-purple {
		background: #ffffff;
	}

	.bg-purple1 {
		background: #4FC1B0;
	}

	.bg-purple2 {
		background: #ffffff;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 50px;
	}

	.grid-content2 {
		border-radius: 4px;
		min-height: 30px;
	}

	.grid-content1 {
		border-radius: 4px;
		min-height: 320px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
